<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
	var arr = ['医务部','护理部','门诊部','人资','院办','教学办','信息部','总务部'];
	console.log(arr);

	window.onload = function(){
		var oBtn1 = document.getElementById('btn1');
		var oTxt = document.getElementById('txt');
		var oNum = document.getElementById('num');
		// console.log(oNum.value);
		oBtn1.onclick = function(){
			arr.push(oTxt.value);
			alert(oTxt.value+'已加入');
			oTxt.value = '';
		}
		var oBtn = document.getElementById('btn');
		var oBox = document.getElementById('box');
		var oK = false;
		var timer = null;
		oBtn.onclick = function(){
			if(oK){
				clearInterval(timer);
				oBtn.value = '开始';
				oK = false;
			}else{
				if(arr.length == 1){
					oBox.innerHTML = '奖品发完了';
				}else{
					timer = setInterval(function(){
						oK = true;
						oBtn.value = '停止';
						oBox.innerHTML = arr[parseInt(Math.random()*arr.length)]
					},30);
					for(var i=0; i<arr.length; i++){
						if(arr[i] == oBox.innerHTML){
							arr.splice(i,1);
							console.log(arr);
						}
					}
				}
			}
		}
	}
	</script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: #e4331c;
			font-family: '微软雅黑';
		}
		#btn{
			width: 100px;
			height: 60px;
			font-size: 30px;
			font-family: '微软雅黑';
			color: red;
			background: yellow;
			border: 2px solid #000;
			position: absolute;
			top: 40%;
			left: 50%;
			margin-top: -50px;
			margin-left: -50px;
		}
		#box{
			width: 200px;
			color: yellow;
			position: absolute;
			top: 55%;
			left: 50%;
			margin-top: -50px;
			margin-left: -100px;
			text-align: center;
			font-size: 50px;
		}
	</style>
</head>
<body>
	<input type="text" name="" id="txt">
	<input type="button" value="加入" id="btn1">
	抽取个数：<input type="number" name="points" min="1" max="10" id="num" value="1" />
	<input type="button" value="开始" id="btn">
	<div id="box"></div>
</body>
</html>